<template>
    <div class="nav-main">
        <div v-if="list.length>0">
            <div v-for="(item,index) in list" :key="index">
                <div class="item">  
                    <input type="checkbox" v-model="item.complete"/>
                    {{item.title}}
                    <button class="del" @click="del(item,index)">删除</button>
                </div>
            </div>
        </div>
        <div v-else>
            --暂无任务--
        </div>
    </div>
</template>

<script>
    import { computed, defineComponent} from 'vue' 
    import { useStore } from 'vuex'
    export default defineComponent({
        name:'navMain',
        props:{
            list:{
                type:Array,
                required:true
            }
        },
        emits:['del'],
        setup(props,ctx){
           let store = useStore()
            let del = (item,index) =>{
                 console.log(item,index);
                //  ctx.emit('del',index)
                 store.commit('delTodo',index)
            }
            return {
                del
            }
        }
    })
</script>

<style lang="scss" scoped>
    .item{
        height: 35px;
        width: 240px;
        line-height: 35px;
        position: relative;
        cursor: pointer;
        button{
            position: absolute;
            right: 20px;
            top: 6px;
            display: none;
            z-index: 99;
        }
        &:hover{
            background-color: #ddd;
            button{
                display: block;
            }
        }
    }
    .nav-main{
        width: 240px;
    }
</style>